<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>门店添加</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
	<style type="text/css">
		.layui-form{
			padding: 10px ;
		}
		.layui-form-item {
			width: 100%;
			float: left;
			margin-right: 0;
		}

		@media (max-width: 1240px) {
			.layui-form-item .layui-inline {
				width: 100%;
				float: none;
			}
		}
		.layui-form-pane .left{
			width:400px;
			float:left;
		}
		.layui-form-pane .right{
			width:500px;
			float:left;
		}
		#container {width:500px; height: 250px; }
		#myPageTop{
			margin:20px 0;
			text-indent:1em;
		}
		#tipinput,#lnglat{
			width: 170px;
			height: 30px;
			margin: 5px 40px 0 0px;
		}
		#submit{
			margin: 0 0 0 13px;
		}
		.layui-code, .layui-upload-list{
			margin: 0 80px 0 0;
			width: 90px;
			float: right;
		}
		.layui-code, .layui-upload-list img{
			width:100%;
		}
	</style>
</head>
<body class="childrenBody">
	<form class="layui-form layui-form-pane">
	<div class="left">
		<div class="layui-form-item">
			<h3>基本信息</h3>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">所属区域</label>
			<div class="layui-input-block">
				<select name="regionId" lay-verify="required" id="regionId">
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">门店名称</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" name="name" placeholder="请输入门店名称">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">门店地址</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input"  name="address" lay-verify="required" placeholder="请输入门店地址">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">联系人</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" name="contacts" placeholder="请输入联系人">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机号码</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required||phone" name="phone" placeholder="请输入手机号码">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">固定电话</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" name="landline" placeholder="请输入固定电话">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" name="username" placeholder="请输入账号名">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="required" name="password" placeholder="请输入密码">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">公众号账号</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="" name="officialAccount" placeholder="请输入公众号账号">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">公众号名称</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="" name="officialName" placeholder="请输入公众号名称">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">APPID</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="" name="appid" placeholder="请输入APPID">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">APPSecret</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" lay-verify="" name="appSecret" placeholder="请输入APPSecret">
			</div>
		</div>
		<!--<div class="layui-form-item">
			<label class="layui-form-label">PICC授权门店</label>
			<div class="layui-input-block">
				<select name="piccMid" id="piccMid" lay-search>
					<option value="0">&#45;&#45;请直接选择或通过检索获取授权门店&#45;&#45;</option>
				</select>
			</div>
		</div>-->
		<div class="layui-form-item">
			<label class="layui-form-label">门店LOGO</label>
			<input type="hidden" name="merchantImg">
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test1">上传图片</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo1">
					<p id="demoText" style="margin-left: 100px;"></p>
				</div>
			</div>
		</div>
	</div>
	<div class="right">
		<div class="layui-form-item">
			<h3 style="margin-left:110px;">地图坐标</h3>
		</div>
		<div class="layui-form-item">
			<!--<label class="layui-form-label">选择经纬度</label>-->
			<div class="layui-input-block">
				<div id="container"></div>
				<div id="myPageTop">
					<table>
						<tr>
							<td>
								<label>按关键字搜索：</label>
							</td>
							<td class="column2">
								<label>左击获取经纬度：</label>
							</td>
						</tr>
						<tr>
							<td>
								<input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
							</td>
							<td class="column2">
								<input type="text" readonly="true" id="lnglat" name="lnglat">
							</td>
						</tr>
					</table>
				</div>
			</div>

		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" lay-filter="addMerchants" id="submit">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
	</div>
	</form>
	<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="/plugins/layui/layui.js"></script>
	<!--高德地图JSAPI-->
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=d7175f7d8ac6be409ba22e0a2c3adc3a&plugin=AMap.Autocomplete"></script>
	<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

	<script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
	</script>
	<script type="text/javascript">
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                form.render();
            });
        }
        var regionsList;
        $.ajax({
            type : "GET",
            url: '/regions/getAll',
            dataType:'json',
            async:false,
            success: function(data){
                var list=data.data;
                regionsList=list;
                var html='';
                for(var i=0;i<list.length;i++){
                    html += "<option value='"+list[i].id+"'>"+list[i].regionName+"</option>"
                }
                $("#regionId").append(html);
                renderForm();
            }
        });

      /*  $.ajax({
            type : "GET",
            url: '/merchants/piccStores.json',
            dataType:'json',
            async:false,
            success: function(data){
                var list=data.data;
                var html='';
                for(var i=0;i<list.length;i++){
                    html += "<option value='"+list[i].id+"'>"+list[i].storeName+"</option>"
                }
                $("#piccMid").append(html);
            }
        });*/
	layui.config({
		base : "js/"
	}).use(['form','layer','jquery','upload'],function(){
		var form = layui.form,
			layer = parent.layer === undefined ? layui.layer : parent.layer,
            upload = layui.upload,
			$ = layui.jquery;

        //上传图片
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/merchants/upload/'
			,size:1024
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code==2000){
                    //上传成功
                    layer.msg('上传成功');
					$("input[name='merchantImg']").val(res.data);
                } else{
                   return   layer.msg('上传失败');
				}

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

		//创建一个编辑器
	 	form.on("submit(addMerchants)",function(data){
	 		var datas=data.field;
	 		//(JSON.stringify(datas));
	 		var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
	 		$.ajax({  
	            type: "POST",  
	            url:"/merchants",  
	            data:JSON.stringify(datas),// 序列化表单值  
	         //   dataType: "json",
	            contentType:"application/json",
	           
	            success: function(res) {  
	            	if(res.code==2000){
	            		top.layer.close(index);
	          			top.layer.msg("添加成功！");
	           			layer.closeAll("iframe");
	          	 		//刷新父页面
	          	 		parent.location.reload();
	            	}else{
	            		top.layer.msg(res.msg);
	            	}
	            
	            } ,
		 		 error: function(request) {  
		             alert("Connection error");  
		         } 
	        }); 
	 		return false;
	 	})
		
	})
	</script>
</body>
</html>

